<template>
    <div>
        <div class="login">
            <div class="loginFrame">
                <div class="loginBG"></div>
                <div class="loginCard">
                    <el-form ref="loginFormRef" :model="loginForm"  label-width="0" 
                    :rules="loginFormRules" class="mainLogin" v-if="!ifRegister">
                     <h1>登录</h1>
                        <!-- 用户名 -->
                        <el-form-item prop="username">
                            <input  v-model="loginForm.username" class="login-component" placeholder="USERNAME">
                        </el-form-item>
                        <!-- 密码 -->
                        <el-form-item prop="password">
                            <input v-model="loginForm.password" 
                             type="password" class="login-component"  placeholder="PASSWORD">
                        </el-form-item>
                        <el-form-item >
                             <el-select v-model="type_value" placeholder="请选择" class="type_select">
                                <el-option v-for="item in types" :key="item.key" :label="item.label" :value="item.value"></el-option>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <a href="#" class="login-link1" @click="goToRegister">没有账号？点此注册</a>
                        </el-form-item>
                        <!-- 按钮 -->
                        <el-form-item >
                           <button class="login-link2" @click="login" @keyup.enter="login" >登录</button>
                        </el-form-item>
                    </el-form>
                    <el-form ref="registerFormRef" :model="registerForm" label-width="0"
                    :rules="registerFormRules" class="mainLogin" v-if="ifRegister">
                    <h1>注册</h1>
                        <el-form-item prop="username">
                            <input  v-model="registerForm.username" class="login-component" placeholder="USERNAME">
                        </el-form-item>
                        <el-form-item prop="password">
                            <input v-model="registerForm.password" 
                            @keyup.enter.native="login"  type="password" class="login-component"  placeholder="PASSWORD">
                        </el-form-item>
                        <el-form-item prop="rePutPassword">
                            <input v-model="registerForm.rePutPassword" 
                              type="password" class="login-component"  placeholder="CHECK PASSWORD">
                        </el-form-item>
                        <el-form-item >
                           <button class="login-link2" @click="register" @keyup.enter.native="register">注册</button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
            var validrePutPassword = (rule, value, callback) => {
             if (value !== this.registerForm.password) {
                callback(new Error("两次输入密码不一致！"));
            } else {
                callback();
            }
            }  
             return{
            ifRegister:false,
            type_value:'/user',
            loginForm:{
                username:"",
                password:""
            },
            types:[
                {
                    key:1,
                    label:'普通用户',
                    value:'/user'
                },
                {
                    key:2,
                    label:'商户',
                    value:'/shop'
                },
                {
                    key:3,
                    label:'管理员',
                    value:'/admin'
                }
            ],
            registerForm:{
                username:"",
                password:"",
                rePutPassword:""
            },
            loginFormRules:{
                username:[
                    {required:true,message:"请输入用户名",trigger:'blur'},
                    {min:3,max:10,message:"长度在3到10个字符",trigger:'blur'}
                ],
                password:[
                    {required:true,message:"请输入密码",trigger:'blur'},
                    {min:6,max:15,message:"长度在6到15个字符",trigger:'blur'}
                ],

            },
            registerFormRules:{
                username:[
                    {required:true,message:"请输入用户名",trigger:'blur'},
                    {min:3,max:10,message:"长度在3到10个字符",trigger:'blur'}
                ],
                password:[
                    {required:true,message:"请输入密码",trigger:'blur'},
                    {min:6,max:15,message:"长度在6到15个字符",trigger:'blur'}
                ],
                rePutPassword:[
                    {required:true,message:"请再次输入密码",trigger:'blur'},
                    {validator:validrePutPassword,trigger:'blur'}
                ]
            },
            
        }
        
    },
    methods:{
        login(){
            var that=this;
           this.$refs.loginFormRef.validate(valid=>
            {
                if(!valid)
                    return this.$message.error("请填写完整信息！");
              that.checkLogin();
            })
            
        },
        async checkLogin()
        {
            if(this.type_value=='/user')
            {
                const res=await this.$http.post("rent/login/user",this.loginForm)
                if(res.data.code!=200)
                {
                    this.$message.error("用户名或密码错误!")
                    return;
                }
                sessionStorage.setItem("user", res.data.data.token)
                sessionStorage.setItem("userAvatar",res.data.data.data.url)
                sessionStorage.setItem("userName",res.data.data.data.username)
                sessionStorage.setItem("userPassword",res.data.data.data.password)
                console.log(res.data.data)
                this.$router.push(this.type_value)
                this.$message.success("登录成功!")
            }
            else if(this.type_value=='/shop')
            {
               const res=await this.$http.post("rent/login/merchant",this.loginForm) 
               if(res.data.code!=200)
                {
                    this.$message.error("用户名或密码错误!")
                    return;
                }
                sessionStorage.setItem("merchant", res.data.data.token)
                sessionStorage.setItem("merchantAvatar",res.data.data.data.url)
                sessionStorage.setItem("merchantName",res.data.data.data.username)
                sessionStorage.setItem("merchantPassword",res.data.data.data.password)
                sessionStorage.setItem("merchantAddress",res.data.data.data.address)
                this.$router.push(this.type_value)
                this.$message.success("登录成功!")
            }
            else if(this.type_value=='/admin')
            {
              const res=await this.$http.post("rent/login/manager",this.loginForm) 
              console.log(res)
               if(res.data.code!=200)
                {
                    this.$message.error("用户名或密码错误!")
                    return;
                }
                sessionStorage.setItem("admin", res.data.data.token)
                this.$router.push(this.type_value)
                this.$message.success("登录成功!")
            }
        },
        goToRegister()
        {
            this.ifRegister=true;
        },
        register(){
            this.$refs.registerFormRef.validate(valid=>
          {
              if(!valid)
              return this.$message.error("请填写完整信息!");
              this.$message.success("注册成功!");     
              this.ifRegister=!this.ifRegister;
          })
        }
    }
}
</script>

<style lang="less">
.login
{   
    height:100vh;
    background-image: linear-gradient(to left, #9c88ff,#3cadeb);
    display: flex;
    justify-content: center;
}
.loginFrame
{
    position:relative;
    top: 50px;
    width: 1100px;
    height: 550px;
    box-shadow: 0 5px 15px rgba(0,0,0,.8);
    display: flex;
    animation:elementin 2s;
}
.loginBG{
    width: 800px;
    height: 550px;
    background-image: url("../assets/img/loginbg.jpg");
    /* 让图片适应大小 */
    background-size: cover;
}
.loginCard{
    width: 300px;
    height: 550px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainLogin{
    width: 250px;
    height: 500px;
}
.mainLogin h1{
    font: 900 30px '';
}
.login-component
{
    width: 230px;
    margin: 12px 0;
    outline: none;
    border: 0;
    padding: 10px;
    border-bottom: 3px solid rgb(80,80,170);
    font: 900 16px '';
}
.login-link1{
    float: right;
    margin-top:-20px;
    text-decoration: none;
}
.login-link2
{
    position: absolute;
    margin: 20px;
    display: block;
    width: 200px;
    height: 60px;
    font: 900 30px '';
    text-decoration: none;
    border:none;
    line-height: 30px;
    border-radius: 30px;
    transition: .3s;
    cursor: pointer;
    background-image: linear-gradient(to left, #9c88ff,#3cadeb);
    text-align: center;
    &:hover{
        transform: scale(1.1);
        
    }
}
.type_select
{
    border: 0;
    border-bottom: 3px solid rgb(80,80,170);
    .el-input__inner{
        border:0;
        font: 900 16px '';
    }
    
}
</style>